import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker} from '@tarojs/components'
import { AtList, AtListItem, AtTextarea,AtForm, AtInput, AtAvatar,AtButton} from "taro-ui"
import './xinxiguanli.css'
import { $redirectTo, getGlobalData } from '../../../../global';
import app from '../../../../main.js'


export default class Xinxiguanli extends Component {


    config = {  
    navigationBarTitleText: '信息管理',

    }

    constructor(props) {
        super(...arguments,props);
        this.state = {
            doctor:'',
            selector:['男','女'],
            summary:'',
            summary1:1,
            flag:true
        }
    }

    handleChange (index,event) {
        let a = this.state.doctor
        if(index == 1 ){
            a.speciality = event.target.value
            this.setState({
                doctor: a
            })
        }else if(index == 2){
            a.summary = event.target.value
            this.setState({
               doctor : a,
               summary1:event.target.value
            })
        }else{
            a.age = event
            this.setState({
                doctor : a
            })
        }
    }

    componentWillMount() {
        this.getDoctor();
    }


    getDoctor() {
        var me = this;
        var data = {id: me.$router.params.id};
            app.get("web/doctor/get", data, function(res) {
                var doctor = res.data.result;
                doctor.speciality = !doctor.speciality ? '' : doctor.speciality;
                doctor.summary = !doctor.summary ? '' : doctor.summary;
                me.setState({
                    doctor: doctor,
                    summary:doctor.summary
                },()=>{
                    me.moundH()
                })
        })
    }

    moundH () {
        let me = this
        const phoneH = Taro.getSystemInfoSync()
        console.log(888,phoneH.screenHeight)
        let query = Taro.createSelectorQuery()
        query.select('.xinxiguanli').boundingClientRect()
        query.selectViewport().scrollOffset()
        query.exec(function(res){
            console.log(999,res)
            if(phoneH.screenHeight <= res[0].height){
                console.log(111)
                if(res[0].height - res[0].bottom <= 50){
                    console.log(888,res[0].height - res[0].bottom)
                    let doctor = me.state.doctor
                    doctor.summary = '  '
                    me.setState({
                        doctor:doctor
                    })
                }else{
                    let doctor = me.state.doctor
                    let summary1 = me.state.summary1
                    let summary = me.state.summary == '  ' ? '' : me.state.summary
                    let flag = me.state.flag
                    console.log(123,summary1)
                    if(summary1 == 1 && flag){
                        doctor.summary = summary
                        me.setState({
                            doctor:doctor
                        })
                    }else{
                        doctor.summary = summary1
                        me.setState({
                            doctor:doctor,
                            flag:false
                        })
                    }
                    console.log(899,res[0].height - res[0].bottom)
                }
            }
        })
    }

    onPageScroll () {
        this.moundH()
    }

    post(){
        let data = {
            head_image:this.state.doctor.head_image,
            token:'sss',
            id:this.$router.params.id,
            gender:this.state.doctor.gender,
            speciality:this.state.doctor.speciality,
            summary:this.state.doctor.summary == '  ' ? '' : this.state.doctor.summary,
            gender:this.state.doctor.gender,
            age:this.state.doctor.age
        }
        app.post('web/doctor/saveInfo', data, function(res){
            app.redirectTo('../personalcenter/personalcenter')
        })
    }

    onsexChange = e => {
        let a = this.state.doctor
        a.gender = this.state.selector[e.detail.value]
        this.setState({
          doctor: a
        })
    }
    

    uploadHeadImage() {
        var me = this;
        Taro.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success(res) {
                const tempFilePaths = res.tempFilePaths
                Taro.uploadFile({
                url: app.apiUri + '/admin/upload/image',
                filePath: tempFilePaths[0],
                name: 'file',
                formData: {
                    name: 'file'
                },
                success(res) {
                    if (res.statusCode == 413) {
                        app.toast('文件过大，请重新上传');
                        return;
                    }
                    let data = JSON.parse(res.data);
                    if (data.status == 200) {
                    let doctor = me.state.doctor;
                    doctor.head_image = data.result;
                    me.setState({
                        doctor: doctor
                    });
                    }
                }
                })
            }
        })
    }

    

    render() {
        return (
            <View className='xinxiguanli'>

                <AtForm>
                    <View className='headImg'>
                        <View className='headtext'>头像</View>
                        <View onClick={this.uploadHeadImage}>
                            <AtAvatar className='img' circle image={app.getPath(this.state.doctor.head_image)} size='small'></AtAvatar>
                        </View>
                        <View className='t' onClick={this.uploadHeadImage}>〉</View>
                    </View>
                </AtForm>

                <AtList>
                    <AtListItem title='真实姓名' extraText={this.state.doctor.name} />
                </AtList>

                <AtForm className='list'>
                    <AtInput title='年龄' type='number' maxLength='2' placeholder='请输入年龄' value={this.state.doctor.age == null ? '' : this.state.doctor.age} onChange={this.handleChange.bind(this,3)}/>
                </AtForm>

                <AtForm>
                    <View className='headImg'>
                        <View className='headtext'>性别</View>
                        <View >
                            <Picker mode='selector' range={this.state.selector} onChange={this.onsexChange}>
                                <View className='picker'>{this.state.doctor.gender}</View>
                                <View className='t' onChange={this.onsexChange}>〉</View>
                            </Picker>
                        </View>
                        
                    </View>
                </AtForm>
                
                <AtList>
                    {/* <AtListItem title='性别'  extraText={this.state.doctor.gender} /> */}
                    <AtListItem title='医院'  extraText={this.state.doctor.hospital} />               
                    <AtListItem title='科室'  extraText={this.state.doctor.department} />
                    <AtListItem title='职称'  extraText={this.state.doctor.positional_title} />
                </AtList>

                <View className='body'>
                    <View className='body-box'>
                        <View className='body-text'>擅长</View>
                        <AtTextarea
                            className='textarea'
                            value={this.state.doctor.speciality}
                            onChange={this.handleChange.bind(this,1)}
                            maxLength={500}
                            placeholder='请输入您的擅长领域，信息将会被展示在医生主页，字数范围为1-500字'
                        />
                    </View>

                    <View className='body-box'>
                        <View className='body-text'>简介</View>
                        <AtTextarea
                            className='textarea'
                            value={this.state.doctor.summary}
                            onChange={this.handleChange.bind(this,2)}
                            maxLength={500}
                            placeholder='请输入您的个人简介，信息将会被展示在医生主页，字数范围为1-500字'
                        />
                    </View>
                </View>
                
                <View className='empty'></View>
                <AtButton type='primary' className='btn' onClick={this.post.bind(this)}>确定</AtButton>

            </View>
        )
    }
}
